<template>
    <div>
        <el-select v-model="selectedProvince" @change="handleProvinceChange">
            <el-option
                v-for="province in provinces"
                :key="province.id"
                :value="province.id"
                :label="province.name"
            ></el-option>
        </el-select>

        <el-select v-model="selectedCity" @change="handleCityChange">
            <el-option
                v-for="city in cities"
                :key="city.id"
                :value="city.id"
                :label="city.name"
            ></el-option>
        </el-select>

        <el-select v-model="selectedDistrict">
            <el-option
                v-for="district in districts"
                :key="district.id"
                :value="district.id"
                :label="district.name"
            ></el-option>
        </el-select>

        <button @click="modifyData">修改数据</button>
    </div>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            provinces: "",
            cities: [],
            districts: [],
            selectedProvince: "",
            selectedCity: "",
            selectedDistrict: "",
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            axios.get("/provinces").then(
                (response) => {
                    console.log(response.data);
                    this.provinces = response.data.data;
                },
                (response) => {
                    console.log("error");
                }
            );
        },

        handleProvinceChange() {
            // 根据选择的省级，更新城市和区县级数据
            const selectedProvince = this.provinces.find(
                (province) => province.id === this.selectedProvince
            );
            this.cities = selectedProvince ? selectedProvince.cities : [];
            this.selectedCity = "";
            this.selectedDistrict = "";
        },
        handleCityChange() {
            // 根据选择的市级，更新区县级数据
            const selectedCity = this.cities.find(
                (city) => city.id === this.selectedCity
            );
            this.districts = selectedCity ? selectedCity.districts : [];
            this.selectedDistrict = "";
        },
        modifyData() {
            // 修改数据逻辑，可以在这里对data对象进行操作
            // 例如添加新的省、市、区数据
            const newProvince = {
                id: newId(), // 你可以实现一个生成新id的方法
                name: "New Province",
                cities: [
                    {
                        id: newId(),
                        name: "New City",
                        districts: [
                            {
                                id: newId(),
                                name: "New District",
                            },
                        ],
                    },
                ],
            };

            // 使用Vue的数据绑定，将新的数据添加到对应的数组中
            this.provinces.push(newProvince);
            // 或者你可以通过其他方式来修改和添加数据，比如发送请求到服务器等
        },
    },
};
</script>

<style>
/* 样式可以根据需要进行调整 */
</style>
